<template>
  <public-modal
    width="500px"
    :footer="false"
    :title="title"
    modalStyle="visitor-detailModal"
    :publicVisible="publicVisible"
    @handleOk="handleOk"
    @cancel="cancel"
  >
    <div slot="content">
      <div class="content-container">
        <table v-if="type == 1">
          <tr>
            <td colspan="1" class="td_lable">监测仪厂家</td>
            <td colspan="3" class="td_value">{{ records.factoryId_dictText }}</td>
          </tr>
          <tr>
            <td colspan="1" class="td_lable">设备名称</td>
            <td colspan="3" class="td_value">{{ records.name }}</td>
          </tr>
          <tr>
            <td colspan="1" class="td_lable">设备MN号</td>
            <td colspan="3" class="td_value">{{ records.monitorMn }}</td>
          </tr>

          <tr class="extend">
            <td colspan="1" class="td_lable"></td>
            <td colspan="1" class="td_lable"></td>
            <td colspan="1" class="td_lable"></td>
            <td colspan="1" class="td_value"></td>
          </tr>
        </table>

        <table v-else-if="type == 2">
          <tr>
            <td colspan="1" class="td_lable">设备类型</td>
            <td colspan="3" class="td_value">{{ dict_purify_type[0].text }}</td>
          </tr>
          <tr>
            <td colspan="1" class="td_lable">处理风量(㎡/h)</td>
            <td colspan="3" class="td_value">{{ results.purifyAirVolume }}</td>
          </tr>
          <tr>
            <td colspan="1" class="td_lable">设备功率(w)</td>
            <td colspan="3" class="td_value">{{ results.purifyPower }}</td>
          </tr>

          <tr class="extend">
            <td colspan="1" class="td_lable"></td>
            <td colspan="1" class="td_lable"></td>
            <td colspan="1" class="td_lable"></td>
            <td colspan="1" class="td_value"></td>
          </tr>
        </table>

        <table v-else-if="type == 3">
          <tr>
            <td colspan="1" class="td_lable">风机类型</td>
            <td colspan="3" class="td_value">{{ dict_fan_type[0].text }}</td>
          </tr>
          <tr>
            <td colspan="1" class="td_lable">排风速(m/s)</td>
            <td colspan="3" class="td_value">{{ results.fanSpend }}</td>
          </tr>
          <tr>
            <td colspan="1" class="td_lable">实际排风量(㎡/h)</td>
            <td colspan="3" class="td_value">{{ results.fanRealSpend }}</td>
          </tr>

          <tr class="extend">
            <td colspan="1" class="td_lable"></td>
            <td colspan="1" class="td_lable"></td>
            <td colspan="1" class="td_lable"></td>
            <td colspan="1" class="td_value"></td>
          </tr>
        </table>

        <table v-else-if="type == 4">
          <tr>
            <td colspan="1" class="td_lable">烟罩长度(m)</td>
            <td colspan="3" class="td_value">{{ results.smokeLength }}</td>
          </tr>
          <tr>
            <td colspan="1" class="td_lable">烟管横截面积(㎡)</td>
            <td colspan="3" class="td_value">{{ results.pipeArea }}</td>
          </tr>
          <tr>
            <td colspan="1" class="td_lable">烟管长度(m)</td>
            <td colspan="3" class="td_value">{{ results.pipeLength }}</td>
          </tr>

          <tr class="extend">
            <td colspan="1" class="td_lable"></td>
            <td colspan="1" class="td_lable"></td>
            <td colspan="1" class="td_lable"></td>
            <td colspan="1" class="td_value"></td>
          </tr>
        </table>
      </div>
    </div>
    <div slot="footer"></div>
  </public-modal>
</template>
<script>
import publicModal from '@/components/publicModal'
import { findEnableDictItemsbyCode } from '@/api/api'
import { fanInfo, purifyInfo, smokeInfo } from '@/api/device'
export default {
  name: 'cancelModel',
  components: { publicModal },
  data() {
    return {
      type: '',
      title: '',
      records: {},
      results: {},
      fan_device_type: [],
      purify_device_type: [],
      dict_fan_type: '',
      dict_purify_type: '',
      publicVisible: false,
    }
  },
  mounted() {
    this.getDist()
  },
  methods: {
    async getDist() {
      let { result } = await findEnableDictItemsbyCode({ code: 'fan_device_type' })
      this.fan_device_type = result
      let res = await findEnableDictItemsbyCode({ code: 'purify_device_type' })
      this.purify_device_type = res.result
    },

    async show(records, type) {
      this.type = type
      this.records = records
      if (type == 1) {
        this.title = '监测仪信息'
      } else if (type == 2) {
        this.title = '净化设备信息'
        let { result } = await purifyInfo({ deviceId: records.id })
        this.dict_purify_type = this.purify_device_type.filter((item) => {
          if (item.value == result.purifyType) return item
        })
        this.results = result
      } else if (type == 3) {
        this.title = '风机信息'
        let { result } = await fanInfo({ deviceId: records.id })
        this.results = result
        this.dict_fan_type = this.fan_device_type.filter((item) => {
          if (item.value == result.fanType) return item
        })
      } else if (type == 4) {
        this.title = '烟道信息'
        let { result } = await smokeInfo({ deviceId: records.id })
        this.results = result
      }

      this.publicVisible = true
    },
    cancel() {
      this.publicVisible = false
    },
    handleOk() {},
  },
}
</script>
<style lang="less">
.visitor-detailModal {
  .content-container {
    padding: 32px 34px;

    table {
      td {
        width: 120px;
        // max-width: 120px;
        height: 46px;
        background: #02595b;
        border: 1px solid #036265;
        text-align: center;

        font-size: 14px;
        font-weight: 400;

        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
        // border-collapse: separate;
      }

      .extend > td {
        height: 0;
        border: none;
      }
    }

    .td_lable {
      color: #02c1c7;
    }

    .td_value {
      color: #9cfdff;
    }
  }
}
</style>
